<template>
	<div class="teacher-cont">
		<div class="pic-swip" :index="msg">
						<img src="../assets/TeacherPic.jpg" />
		</div>
		<div class="nav-bot">
			<span @click="openClass"><img  src="../assets/talk1.png" />课程咨询</span>
			<span @click="openJob"><img src="../assets/talk.png"/>就业咨询</span>
		</div>
		<div class="show-pic"  v-bind:class="{show:isShow}">
			<img @click="closePic" ref="showpic" src="../assets/pict.gif" />
		</div>

		<div class="teacher-list">
			<ul>
				<li v-for="item in teachers">
					<img :src="item[0]" />
					<div class="teacher-details-text">
						<p class="teacher-list-name">
							{{item[1]}}
						</p>
						<div class="teacher-list-job">
							<p>{{item[2]}}</p>
							<p>{{item[3]}}</p>
						</div>
						<div class="teacher-list-intr">
						{{item[4]}}
						</div>
					</div>

				</li>


			</ul>

		</div>
		<div class="pic-wall">

			<div class="pic-tex">
					<h2>师生沟通交流墙</h2>
					<img v-for="item in pictures" :src="item"/>
			</div>

		</div>

	</div>
</template>

<script>
	import {swiper,swiperSide} from 'vue-awesome-swiper'
	export default{
		name:'Teacher',
		mounted(){
  		this.swipS()
    	},
		data(){
			return {
				swiperOption:{
					 pagination:'.swiper-pagination',
					 autoplay:true
					},
				 msg:'111',
				 teachers:[],
				 pictures:[],
				 isShow:false

				}

			},
		components:{
				swiper,
				swiperSide
			},
		methods:{
			openClass(){
				this.isShow = true;
				this.$refs.showpic.src = require("../assets/bg2.png")
			},
			openJob(){
				this.isShow = true;
				this.$refs.showpic.src = require("../assets/pict.gif")
			},
			closePic(){
				this.isShow = false;
			},
	    	swipS(){
	    		let self = this;
	    		this.msg = '';
	    		this.$http({
					method:'get',
					url:'Teachers',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					}

				}).then((response)=>{
					self.teachers = response.data[0];
					self.pictures = response.data[1];
				})

	    	}

    }

	}
</script>

<style>
	.nav-bot img{
		width: 30px;
		vertical-align: middle;
		margin-right: 10px;
	}
	.nav-bot span{
		text-align: center;
		display: inline-block;
		float: left;
		width: 50%;
		margin: 0;
		background: white;
		height: 40px;
		font-size: 12px;
		line-height: 40px;
	}
	.show-pic{
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		top: 510px;
		display: none;
		z-index: 100;
	}
	.show{
		display: block!important;
	}
	.show-pic img{
		width: 70%;
		position: relative;
		top: 10px;
		margin-left: 15%;
	}
	.teacher-details-text{
		width: 65%;
		position: relative;
		left:35% ;
		text-align: left;
	}
	.teacher-cont p{
		margin: 0;
	}
    .teacher-cont .teacher-list ul li p{
		position: relative;
		padding-left: 10px;
		padding-right: 10px;

	}

	.teacher-cont .pic-swip img{
		height: 470px!important;
		width: 100%;
	}
	.teacher-cont .pic-swip{
		width: 100%;
		height: 470px;
		position: relative;
		overflow: hidden;
		top: 0;
	}
	.teacher-cont h2{
		color: white;
		margin-bottom: 30px;
	}
	.teacher-cont .teacher-list ul{
		width: 100%;
		padding: 0;
		list-style: none;
		padding-top: 30px;
		text-align: center;
		z-index: 10;
	}
	.teacher-cont .pic-wall{
		width: 100%;
		height: 364px;
		background: url(../assets/jobbg.jpg);
		text-align: center;
	}
	.teacher-cont .pic-wall img{
		height: 150px;
		width: 100px;
		margin-left: 10px;

	}
	.teacher-cont .pic-tex{
		height: 220px;
		overflow: hidden;
		display: inline-block;
		padding-top: 30px;
	}

	.teacher-cont .teacher-list-job{
		font-size: 12px;
		color: #08adff;

	}
	.teacher-cont .teacher-list-intr{
		font-size: 12px;
		padding-left: 10px;
		margin-top: 10px;
		height: 82px;
		overflow: hidden;
	}
	.teacher-cont .teacher-list-name{
		/*color: #08adff;*/
		 font-size: 18px;
		 font-weight: bold;
		 margin-bottom: 6px;
	}

	.teacher-cont .teacher-list ul li{
		position: relative;
		height: 150px;
		overflow: hidden;
		width: 80%;
		margin-top: 10px;
		overflow: hidden;
		display:inline-block;
	}
	button:focus{
		outline: none;
	}
	.teacher-cont .teacher-list img{
		width: 35%;
		height: 150px;
		position: absolute;
		left: 0;
	}
	.teacher-cont {
		position: relative;
		top: 80px;

	}



</style>
